<template>
  <div class="stock-trading-list">
    <div class="header">
      <h2 class="title">股票交易管理</h2>
      <div class="toolbar">
        <el-button type="default" @click="goBack" class="back-btn">
          <el-icon>
            <ArrowLeft/>
          </el-icon>
          <span>返回</span>
        </el-button>
        <el-button type="success" @click="handleSyncData" class="sync-btn">
          <el-icon>
            <Refresh/>
          </el-icon>
          <span>同步数据</span>
        </el-button>
        <el-button type="success" @click="handleSyncTProfit" class="sync-btn">
          <el-icon>
            <Refresh/>
          </el-icon>
          <span>同步做T收益</span>
        </el-button>
        <el-button type="primary" @click="handleCopy" class="copy-btn">
          <el-icon>
            <DocumentCopy/>
          </el-icon>
          <span>复制</span>
        </el-button>
        <el-button type="info" @click="handleAdd" class="add-btn">
          <el-icon>
            <Plus/>
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button type="danger" @click="handleBatchDelete" :disabled="selectedRows.length === 0" class="delete-btn">
          <el-icon>
            <Delete/>
          </el-icon>
          <span>批量删除</span>
        </el-button>
      </div>
    </div>

    <!-- 查询条件表单 -->
    <el-card class="search-card">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" class="search-form">
        <el-form-item label="交易日期">
          <el-date-picker
            v-model="queryParams.tradeDate"
            type="date"
            placeholder="请选择交易日期"
            value-format="YYYY-MM-DD"
            style="width: 150px"
          ></el-date-picker>
        </el-form-item>
        <!-- 移除了股票编号的查询条件 -->
        <el-form-item label="股票名称">
          <el-select
            v-model="queryParams.stockName"
            placeholder="请选择股票名称"
            style="width: 150px"
            clearable
          >
            <el-option
              v-for="item in stockNameOptions"
              :key="item.stockName"
              :label="item.stockName"
              :value="item.stockName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="总股数">
          <el-input
            v-model="queryParams.totalShares"
            placeholder="请输入总股数"
            style="width: 150px"
            :precision="2"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="当日股价">
          <el-input
            v-model="queryParams.currentPrice"
            placeholder="请输入当日股价"
            style="width: 150px"
            :precision="2"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table
          :data="list"
          border
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          header-cell-class-name="table-header"
          cell-class-name="table-cell"
          @sort-change="handleSortChange"
      >
        <el-table-column type="selection" min-width="3%" align="center"></el-table-column>
        <el-table-column prop="tradeDate" label="交易日期" align="center" min-width="8%" sortable></el-table-column>
        <el-table-column prop="tradeDay" label="星期几" align="center" min-width="6%" sortable></el-table-column>
        <el-table-column prop="stockCode" label="股票编号" align="center" min-width="7%" sortable></el-table-column>
        <el-table-column prop="stockName" label="股票名称" align="center" min-width="9%" sortable></el-table-column>
        <el-table-column prop="profitLoss" label="参考盈亏" align="center" min-width="7%" sortable></el-table-column>
        <el-table-column prop="currentPrice" label="当日股价" align="center" min-width="8%" sortable></el-table-column>
        <el-table-column prop="breakEvenPrice" label="保本价" align="center" min-width="8%" sortable></el-table-column>
        <el-table-column prop="marketValue" label="股票市值" align="center" min-width="10%" sortable></el-table-column>
        <el-table-column prop="totalShares" label="总股数" align="center" min-width="8%" sortable></el-table-column>
        <el-table-column prop="tprofit" label="做T收益" align="center" min-width="8%" sortable></el-table-column>
        <el-table-column prop="createdTime" label="创建时间" align="center" min-width="10%" sortable></el-table-column>
        <el-table-column prop="updatedTime" label="更新时间" align="center" min-width="10%" sortable></el-table-column>
        <el-table-column label="操作" min-width="10%">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 编辑/新增对话框 -->
    <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        width="600px"
        :close-on-click-modal="false"
        class="custom-dialog"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="form-container">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交易日期" prop="tradeDate">
              <el-date-picker
                  v-model="form.tradeDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  value-format="YYYY-MM-DD"
                  @change="handleDateChange"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="星期">
              <el-input v-model="form.tradeDay" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="股票编号" prop="stockCode">
              <el-select
                  v-model="form.stockCode"
                  placeholder="请选择股票编号"
                  style="width: 100%"
                  @change="handleStockCodeChange"
              >
                <el-option
                    v-for="item in stockOptions"
                    :key="item.stockCode"
                    :label="item.stockCode"
                    :value="item.stockCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="股票名称" prop="stockName">
              <el-select
                  v-model="form.stockName"
                  placeholder="请选择股票名称"
                  style="width: 100%"
                  @change="handleStockNameChange"
              >
                <el-option
                    v-for="item in stockNameOptions"
                    :key="item.stockName"
                    :label="item.stockName"
                    :value="item.stockName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="总股数" prop="totalShares">
              <el-input-number
                  v-model="form.totalShares"
                  :precision="2"
                  :step="100"
                  style="width: 100%"
                  @change="calculateMarketValue"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="股票市值">
              <el-input-number
                  v-model="form.marketValue"
                  :precision="2"
                  :step="1"
                  style="width: 100%"
                  readonly
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="当日股价" prop="currentPrice">
              <el-input-number
                  v-model="form.currentPrice"
                  :precision="3"
                  :step="1"
                  style="width: 100%"
                  @change="calculateMarketValue"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="做T收益" prop="tprofit">
              <el-input-number
                  v-model="form.tprofit"
                  :precision="3"
                  :step="1"
                  style="width: 100%"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="盈亏" prop="profitLoss">
              <el-input-number
                  v-model="form.profitLoss"
                  :precision="3"
                  :step="1"
                  style="width: 100%"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保本价" prop="breakEvenPrice">
              <el-input-number
                  v-model="form.breakEvenPrice"
                  :precision="5"
                  :step="0.001"
                  style="width: 100%"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="warning" @click="calculateBreakEvenPrice">计算保本价</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { listStockTrading, pageStockTrading, getStockTrading, addStockTrading, updateStockTrading, delStockTrading, batchDeleteStockTrading, getStockList, syncTProfit } from '@/api/stockTrading'
import {Delete, Plus} from '@element-plus/icons-vue'
import { getTotalTProfitByStockAndDate} from '@/api/stockTTransaction.js'
export default {
  name: 'StockTradingList',
  components: {
    Plus,
    Delete
  },
  data() {
    return {
      // 添加查询参数
      queryParams: {
        tradeDate: '',
        stockName: '',
        totalShares: undefined,
        currentPrice: undefined
      },
      // 默认是交易日期降序
      sortParams: {  // 添加排序参数
        orderByColumn: 'tradeDate',
        isAsc: 'desc'
      },
      list: [],
      form: {
        id: undefined,
        tradeDate: '',
        tradeDay: '',
        stockCode: '',
        stockName: '',
        totalShares: 0,
        marketValue: 0,
        profitLoss: 0,
        breakEvenPrice: 0,
        currentPrice: 0,
        tprofit: 0
      },
      rules: {
        tradeDate: [
          { required: true, message: '请选择交易日期', trigger: 'blur' }
        ],
        stockCode: [
          { required: true, message: '请选择股票编号', trigger: 'change' }
        ],
        stockName: [
          { required: true, message: '请选择股票名称', trigger: 'change' }
        ],
        totalShares: [
          { required: true, message: '请输入总股数', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '总股数必须大于0', trigger: 'blur' }
        ],
        currentPrice: [
          { required: true, message: '请输入当日股价', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '当日股价必须大于0', trigger: 'blur' }
        ],
        tprofit: [
          { required: true, message: '请输入做T收益', trigger: 'blur' }
        ],
        breakEvenPrice: [
          { required: true, message: '请输入保本价', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '保本价必须大于0', trigger: 'blur' }
        ],
        profitLoss: [
          { required: true, message: '请输入盈亏', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      dialogTitle: '',
      isEdit: false,
      selectedRows: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      stockOptions: [], // 股票编号选项
      stockNameOptions: [], // 股票名称选项
    }
  },
  created() {
     // 检查路由参数
    const { stockCode, stockName } = this.$route.query;
    
    // 如果存在路由参数，设置到查询条件中
    if (stockCode || stockName) {
      this.queryParams.stockName = stockName || '';
      // 注意：由于查询表单中只有stockName字段，我们使用stockName作为查询条件
      // 如果需要根据stockCode查询，可以在这里添加相应的逻辑
    }
    this.getList()
    this.getStockOptions() // 获取股票选项列表
  },
  methods: {
    goBack() {
      this.$router.push('/');
    },
    // 计算保本价格
    calculateBreakEvenPrice() {
      // 获取表单中的数据
      const totalShares = Number(this.form.totalShares);
      const currentPrice = Number(this.form.currentPrice);
      const profitLoss = Number(this.form.profitLoss);
      
      // 验证输入数据
      if (!totalShares || totalShares <= 0) {
        this.$message.warning('请输入有效的总股数（大于0）');
        return;
      }
      if (!currentPrice || currentPrice <= 0) {
        this.$message.warning('请输入有效的当日股价（大于0）');
        return;
      }
      if (profitLoss === undefined || profitLoss === null) {
        this.$message.warning('请输入盈亏金额');
        return;
      }
      
      // 计算保本价格
      // 保本价 = (当前总市值 - 盈亏) / 总股数
      const currentMarketValue = totalShares * currentPrice;
      const breakEvenPrice = (currentMarketValue - profitLoss) / totalShares;
      
      // 保留5位小数
      this.form.breakEvenPrice = Number(breakEvenPrice.toFixed(5));
      
      // 显示计算结果
      this.$message.success(`保本价格已计算：${this.form.breakEvenPrice} 元`);
      
      // 可选：在控制台输出详细信息
      console.log('保本价格计算详情：', {
        总股数: totalShares,
        当日股价: currentPrice,
        盈亏: profitLoss,
        当前总市值: currentMarketValue,
        保本价格: this.form.breakEvenPrice
      });
    },
    getList() {
      const params = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        ...this.queryParams,  // 查询参数
        ...this.sortParams    // 排序参数作为独立参数
      }
      pageStockTrading(params).then(response => {
        if (response.code === 200) {
          this.list = response.rows;
          this.pageInfo.total = response.total
        } else {
          console.error('获取股票交易数据失败:', response.msg)
          this.$message.error('获取股票交易数据失败: ' + response.msg)
        }
      }).catch(error => {
        console.error('获取股票交易数据时发生错误:', error)
        this.$message.error('获取股票交易数据时发生错误')
      })
    },
    // 查询方法
    handleQuery() {
      this.pageInfo.pageNum = 1
      this.getList()
    },
    // 重置查询
    resetQuery() {
      this.queryParams = {
        tradeDate: '',
        stockCode: '',
        stockName: '',
        totalShares: '',
        currentPrice: ''
      }
      this.handleQuery()
    },
    // 添加日期改变处理函数
    handleDateChange(date) {
      if (date) {
        // 创建日期对象
        const dateObj = new Date(date);
        // 设置星期几
        this.form.tradeDay = this.getWeekday(dateObj);
      } else {
        // 如果没有选择日期，清空星期几
        this.form.tradeDay = '';
      }
    },
    // 获取股票选项列表
    getStockOptions() {
      getStockList().then(response => {
        if (response.code === 200) {
          this.stockOptions = response.data
          // 提取股票名称作为选项
          this.stockNameOptions = response.data.map(item => ({
            stockCode: item.stockCode,
            stockName: item.stockName
          }))
        } else {
          console.error('获取股票数据失败:', response.msg)
          this.$message.error('获取股票数据失败: ' + response.msg)
        }
      }).catch(error => {
        console.error('获取股票数据时发生错误:', error)
        this.$message.error('获取股票数据时发生错误')
      })
    },

    // 处理股票编号变化
    handleStockCodeChange(value) {
      // 根据选择的股票编号设置股票名称
      const selectedStock = this.stockOptions.find(item => item.stockCode === value)
      if (selectedStock) {
        this.form.stockName = selectedStock.stockName
      } else {
        this.form.stockName = ''
      }
    },

    // 处理股票名称变化
    handleStockNameChange(value) {
      // 根据选择的股票名称设置股票编号
      const selectedStock = this.stockNameOptions.find(item => item.stockName === value)
      if (selectedStock) {
        this.form.stockCode = selectedStock.stockCode
      } else {
        this.form.stockCode = ''
      }
    },
    handleAdd() {
      this.isEdit = false
      this.dialogTitle = '新增股票交易'
      this.form = {
        id: undefined,
        tradeDate: '',
        tradeDay: '',
        stockCode: '',
        stockName: '',
        totalShares: 0,
        marketValue: 0,
        profitLoss: 0,
        breakEvenPrice: 0,
        currentPrice: 0,
        tprofit: 0
      }
      this.dialogVisible = true
    },
    // 复制最新记录
    handleCopy() {
      if (!this.list || this.list.length === 0) {
        this.$message.warning('暂无数据可复制');
        return;
      }

      // 找到最新的一条记录（按交易日期排序）
      const latestRecord = [...this.list].sort((a, b) => {
        return new Date(b.tradeDate) - new Date(a.tradeDate);
      })[0];

      if (!latestRecord) {
        this.$message.warning('未找到可复制的记录');
        return;
      }

      // 显示复制确认对话框
      this.$confirm(
        `将复制最新记录（交易日期：${latestRecord.tradeDate}，股票：${latestRecord.stockName}），并将日期更新为今天，是否继续？`,
        '复制确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      ).then(() => {
        // 创建新记录，复制除ID和日期外的所有字段
        const newRecord = {
          ...latestRecord,
          id: undefined, // 重置ID，让后端生成新ID
          tradeDate: new Date().toISOString().split('T')[0], // 设置为今天日期
          tradeDay: this.getWeekday(new Date()), // 计算星期几
          createTime: undefined,
          updateTime: undefined,
          createBy: undefined,
          updateBy: undefined
        };

        // 调用新增接口
        addStockTrading(newRecord).then(() => {
          this.$message.success('复制成功');
          this.getList(); // 刷新列表
        }).catch(() => {
          this.$message.error('复制失败');
        });
      }).catch(() => {
        this.$message.info('已取消复制');
      });
    },
    // 获取星期几
    getWeekday(date) {
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      return weekdays[date.getDay()];
    },
    handleEdit(row) {
      this.isEdit = true
      this.dialogTitle = '编辑股票交易'
      this.form = Object.assign({}, row)
      // 如果编辑的数据有日期，重新计算星期几
      if (this.form.tradeDate) {
        this.handleDateChange(this.form.tradeDate);
      }
      // 设置股票名称
      this.handleStockCodeChange(this.form.stockCode);
      this.dialogVisible = true
    },

    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStockTrading(row.id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    submitForm() {
      // 表单验证
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            updateStockTrading(this.form).then(() => {
              this.$message.success('更新成功')
              this.dialogVisible = false
              this.getList()
            })
          } else {
            addStockTrading(this.form).then(() => {
              this.$message.success('创建成功')
              this.dialogVisible = false
              this.getList()
            })
          }
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    },

    // 分页相关方法
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
      this.getList()
    },

    // 批量删除相关方法
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 计算股票市值
    calculateMarketValue() {
      // 确保总股数和当日股价都存在
      if (this.form.totalShares && this.form.currentPrice) {
        // 计算市值并保留两位小数
        this.form.marketValue = (this.form.totalShares * this.form.currentPrice).toFixed(2);
      } else {
        // 如果任一值为空，将市值设为0
        this.form.marketValue = 0;
      }
    },
    handleBatchDelete() {
      this.$confirm(`此操作将永久删除选中的 ${this.selectedRows.length} 条数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 使用批量删除接口
        const ids = this.selectedRows.map(item => item.id);
        batchDeleteStockTrading(ids).then(() => {
          this.$message.success('批量删除成功')
          this.getList()
        }).catch(() => {
          this.$message.error('批量删除失败')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 处理表格排序
    handleSortChange({ column, prop, order }) {
      // 如果有排序属性
      if (prop) {
        // 排序的时候需要特殊处理
        if(prop == 'tprofit') {
          prop = 't_profit';
        }
        // 设置排序字段
        this.sortParams.orderByColumn = prop;
        // 设置排序方向
        this.sortParams.isAsc = order === 'ascending' ? 'asc' : 'desc';
      } else {
        // 如果没有排序属性，清空排序参数
        this.sortParams.orderByColumn = '';
        this.sortParams.isAsc = 'asc';
      }
      
      // 重置页码到第一页
      this.pageInfo.pageNum = 1;
      
      // 重新获取数据
      this.getList();
    },
    // 格式化日期为 yyyy-MM-dd 格式
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    handleSyncTProfit(){
      if (this.selectedRows.length > 1) {
        this.$message.warning('请只选择一条记录进行同步');
        return;
      }
      if (this.selectedRows.length == null || this.selectedRows.length == 0) {
        this.$message.warning('请选择一条记录进行同步');
        return;
      }
      const row = this.selectedRows[0];
      const loading = this.$loading({
        lock: true,
        text: '正在同步做T收益...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      // 格式化日期
      const tradeDate = this.formatDate(row.tradeDate);
      
      // 步骤1：获取当日做T总收益
      getTotalTProfitByStockAndDate(row.stockCode, tradeDate).then(response => {
        if (response.code === 200) {
          const tProfit = response.data || 0;
          
          // 步骤2：更新当日做T收益
          syncTProfit(tradeDate, row.stockCode).then(res => {
            if (res.code === 200) {
              this.$message.success(`同步成功，当日做T收益：${tProfit}`);
              this.getList();
            } else {
              this.$message.error(res.msg || '更新做T收益失败');
            }
          });
        } else {
          this.$message.error(response.msg || '获取做T收益失败');
        }
      }).catch(error => {
        console.error('同步做T收益失败:', error);
        this.$message.error('同步做T收益失败');
      }).finally(() => {
        loading.close();
      });
    },
    
    // 跳转到数据同步页面
    handleSyncData() {
      this.$router.push({
        path: '/data-sync',
        query: {
          from: 'stock-trading' // 标记来源页面
        }
      });
    }
  }
}
</script>

<style scoped>
.stock-trading-list {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.toolbar {
  display: flex;
  gap: 10px;
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-header {
  background-color: #f8f9fa !important;
  color: #606266;
  font-weight: 600;
}

.table-cell {
  padding: 8px 0;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  background-color: #fff;
}

.custom-dialog {
  border-radius: 8px;
}

.form-container {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .toolbar {
    width: 100%;
    justify-content: space-between;
  }

  .table-card :deep .el-table {
    font-size: 12px;
  }

  .table-card :deep .el-table th,
  .table-card :deep .el-table td {
    padding: 5px 0;
  }
}
</style>